<!--
 * @Description: 右侧第一个
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: 18222335065 2369811390@qq.com
 * @LastEditTime: 2022-09-07 19:36:08
-->
<template>
  <div ref="container" style="height: 100%"></div>
</template>

<script>
import { Pie } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {
    loadPie() {
      const data = [
        { type: "优", value: 27 },
        { type: "良", value: 25 },
        { type: "轻度污染", value: 18 },
        { type: "中度污染", value: 15 },
        { type: "重度污染", value: 10 },
        { type: "严重污染", value: 5 },
      ];
      const piePlot = new Pie(this.$refs['container'], {
        appendPadding: 10,
        data,
        angleField: "value",
        colorField: "type",
        radius: 0.8,
        label: {
          type: "outer",
        },
        interactions: [{ type: "element-active" }],
      });
      piePlot.render();
    },
  },
  created() {},
  mounted() {
    this.loadPie();
  },
};
</script>
<style scoped>
</style>